<template lang="pug">
  .m-left
    .master
      .title 主机数量
      .main
        .item(v-for="item  in masters")
          .value {{item.value}}
          .unit 台
          .desc {{item.desc}}
    .online
      .title 上线平均时间统计
      .main(ref="online")
    .operate
      .title 操作日志
      .main
        .item(v-for="item in operates")
          .time {{item.time}}
          .sub {{item.title}}
          .desc(:class="{active:item.active}") {{item.desc}}
</template>
<script>
import echarts from 'echarts'
// 245
const masters = [
  {
    value: '1089',
    desc: '天翼高清'
  }, {
    value: '970',
    desc: '智能家居'
  }, {
    value: '864',
    desc: '网关'
  }, {
    value: '803',
    desc: '公用支持类系统'
  }
]
const operates = [
  {
    time: '2019-02-15 14:18:00 ',
    title: '交通路况服务平台',
    desc: '资源申请待审批'
  },
  {
    time: '2019-02-15 14:18:00 ',
    title: '智慧环保平台',
    desc: '虚机资源扩容成功',
    active: true
  }, {
    time: '2019-02-15 14:18:00 ',
    title: '交通路况服务平台',
    desc: '资源申请待审批'
  }, {
    time: '2019-02-15 14:18:00 ',
    title: '交通路况服务平台',
    desc: '资源申请待审批',
    active: true
  }, {
    time: '2019-02-15 14:18:00 ',
    title: '交通路况服务平台',
    desc: '资源申请待审批',
    active: true
  }

]
export default {
  data () {
    return {
      masters,
      operates
    }
  },
  mounted () {
    this.online()
  },
  methods: {
    online () {
      let option = {
        grid: {
          left: '13%',
          right: 0,
          top: '5%'
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: '#4d5f93'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#fff'
          },
          data: ['天翼高清', '智能家居', '网关', '公用']
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: function (val) {
              return val + ' min'
            },
            color: '#fff'
          },

          axisLine: {
            lineStyle: {
              color: '#4d5f93'
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(77,95,147,0.2)'
            }
          }
        },
        series: [{
          data: [38, 84, 79, 52],
          type: 'bar',
          barWidth: 22,
          label: {
            show: true,
            position: 'top',
            formatter: function ({ data }) {
              return data + ' min'
            },
            color: '#12eaa0'
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: '#14ff93' },
                  { offset: 1, color: '#004eff' }
                ]
              )
            }
          }
        }]
      }
      let el = this.$refs.online
      echarts.init(el).setOption(option)
    }
  }
}
</script>

<style lang="stylus" scoped>
.m-left
  width 422px
  padding-left 29px
  .title
    height 16px
    line-height @height
    font-size 16px
    color #2ca7c7
    font-weight bold
    margin-bottom 25px
    letter-spacing 1px
    background-image url('img/line.png')
    background-repeat no-repeat
    background-position right bottom
  .master
    margin-top 73px
    margin-bottom 30px
    .main
      position relative
      height 254px
      background-image url('img/master.png')
      background-repeat no-repeat
      .item
        position absolute
        text-align center
        .value
          color #fdf85a
          font-size 16px
          font-weight bold
          margin-top 40px
        .unit
          color #2ca7c7
        .desc
          position absolute
          text-align center
          color #2ca7c7
          bottom -24px
        &:nth-child(1)
          width 98px
          height 98px
          left 0px
          .desc
            width 98px
        &:nth-child(2)
          width 100px
          height 100px
          top 118px
          left 91px
          .desc
            width 100px
        &:nth-child(3)
          width 90px
          height 90px
          top 34px
          left 234px
          .desc
            width 90px
          .value
            margin-top 25px
        &:nth-child(4)
          width 79px
          height 79px
          top 157px
          left 306px
          .desc
            width 100px
            left -10px
          .value
            margin-top 25px
  .online
    .main
      height 284px
  .operate
    .main
      .item
        display flex
        height 41px
        line-height @height
        color #ccf8fe
        background #0f3959
        margin-bottom 11px
        padding-left 15px
        &:nth-child(2n)
          background #0e4b79
        .time
          margin-right 10px
        .sub
          width 135px
        .desc
          &.active
            color #06de8a

</style>
